<template>
  <div class="musicList">
    <div class="musicList-top">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>

    <div class="mlist">
    <!-- Swiper -->
     <div class="swiper-container" id="musicSwiper">
    <div class="swiper-wrapper">
      <!-- 歌单列表 -->
      <router-link 
       :to="{path:'/listview',query:{id:item.id}}" 
       class="swiper-slide" 
       v-for="(item,i) in musicList" 
       :key="i" 
      >
      <van-skeleton :row="3" :loading="loading">
        <img :src="item.picUrl" :alt="item.name">
         <div class="name">{{item.name}}</div>
          <div class="count">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-a4gl-play123"></use>
           </svg>
         {{item.playCount}}
         </div>
         </van-skeleton>
       </router-link>
     </div>
   </div>
  </div>

 </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.css'
import useSkeleton from '@/hooks/useSkeleton.js'
import {getMusic} from '@/api/index.js'
import {reactive,onMounted,onUpdated} from 'vue'
import {useStore} from 'vuex'
import useCount from '@/hooks/useCount.js'
export default {
  name:'musicList',
  data(){
    return{
      //歌单列表 
      musicList:[],
      //骨架屏
      loading:true
    }
  },
  methods:{
    async getMusicList(){
      const {data:res}=await getMusic(10)
      this.musicList=res.result
      console.log(this.musicList,'123');
      useCount('obj',this.musicList)
      this.loading=false
    }
  },
  mounted(){
    this.getMusicList()
  },
  updated(){
     var myswiper = new Swiper('#musicSwiper', {
      slidesPerView: 3,
      spaceBetween: 10,
    });
  }
}
</script>

<style lang="less" scoped>
.musicList{
  width:7.5rem;
  padding:0 0.4rem;
  .musicList-top{
    display:flex;
    justify-content:space-between;
    height: 1rem;
    align-items: center;
    .title{
      font-size:0.4rem
    }
    .more{
      border:1px solid #ccc;
      height: 0.5rem;
      width: 1.2rem;
      border-radius: 0.2rem;
      font-size:0.24rem;
      text-align:center;
      line-height: 0.5rem;
    }
  }
}
.mlist{
  .swiper-container{
    width: 100%;
    height: 3rem;
    .swiper-slide{
     position: relative;
    //  background-color: orange;
     display: flex;
     flex-direction: column;
    img{
      width: 100%;
      height: auto;
      border-radius: 0.1rem;
    }
    .name{
      //两行溢出
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 0.8rem;
      width: 100%;
      font-size:0.24rem;
      line-height: 0.4rem;
    }
    .count{
      position: absolute;
      right:0.1rem;
      top:0.1rem;
      font-size:0.24rem;
      color:#ccc;
      display: flex;
      align-items: center;  
      .icon{
        fill: #ccc;
      }
    }  
   }
  }
}
</style>